<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: cyan;
        position: absolute;
        left: 0px;
        top: 0px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>

    <script>
      //方块从左至右移动: 不停的更改left的值

      //一.方块的运动
      var boxEle = document.querySelector(".box");

      //普通写法 很繁琐 很乱  用函数封装一下再调用
      /* var timer = setInterval(function () {
        var num = parseInt(getComputedStyle(boxEle)["left"]);
        num += 1;
        // console.log(num);
        boxEle.style.left = num + "px";
        if (num == 500) {
          clearInterval(timer);
          //往下走
          //普通写法 再写一遍
          var timer1 = setInterval(function () {
            var num1 = parseInt(getComputedStyle(boxEle)["top"]);
            num1 += 1;
            // console.log(num);
            boxEle.style.top = num1 + "px";
            if (num1 == 500) {
              clearInterval(timer1);
              //往下走
              //普通写法 再写一遍
              var timer2 = setInterval(function () {
                var num2 = parseInt(getComputedStyle(boxEle)["left"]);
                num2 -= 1;
                // console.log(num);
                boxEle.style.left = num2 + "px";
                if (num2 == 0) {
                  clearInterval(timer2);
                  //往下走
                  //普通写法 再写一遍
                  var timer3 = setInterval(function () {
                    var num3 = parseInt(getComputedStyle(boxEle)["top"]);
                    num3 -= 1;
                    // console.log(num);
                    boxEle.style.top = num3 + "px";
                    if (num3 == 0) {
                      clearInterval(timer3);
                      //往下走
                      //普通写法 再写一遍
                    }
                  }, 1);
                }
              }, 1);
            }
          }, 1);
        }
      }, 1); */

      //
      //
      //二.方块的运动函数
      //把不变的逻辑封装 需要变动的位置 抽离成变量
      function move(boxEle, dir, target, cb) {
        console.log(cb);
        var timer = setInterval(function () {
          //获取当前boxEle 的left值
          var num = parseInt(getComputedStyle(boxEle)[dir]);
          num += 5 * (target > num ? 1 : -1);
          boxEle.style[dir] = num + "px";
          //假定 运动到500的时候开始向下移动
          if (num == target) {
            clearInterval(timer);
            console.log("停止了");
            cb();
          }
        }, 10);
      }

      var boxEle = document.querySelector(".box");

      //同时执行 :什么时候运动结束了
      //可以通过回调函数实现  停止之后再执行逻辑
      //回调函数 callback
      move(boxEle, "left", 500, function () {
        console.log("执行了");
        move(boxEle, "top", 500, function () {
          console.log("第二次执行完毕");
          move(boxEle, "left", 0, function () {
            console.log("第三次执行完毕");
            move(boxEle, "top", 0, function () {
              console.log("所有都执行完毕");
            });
          });
        });
      });
      // move(boxEle, "left", 500);
    </script>
  </body>
</html>
